import React, { Component } from 'react';
import Bar from "./components/Bar";
import './App.css';

class App extends Component {
constructor(props){
  super(props);

  this.state = {
    r:10,
    g:200,
    b:234
  };
  this.setColor = (this.setColor).bind(this);
}

setColor(color, val){
  this.setState({[color]:val});
}

  render() {
    return (
      <div className="App">
      <div className="box" style={{"backgroundColor":`rgba(${this.state.r}, ${this.state.g}, ${this.state.b})`}}></div>
        <Bar color="r" v={this.state.r} setColor={this.setColor}/>
        <Bar color="g" v={this.state.g} setColor={this.setColor}/>
        <Bar color="b" v={this.state.b} setColor={this.setColor}/>
      </div>
    );
  }
}

export default App;
